<template>
  <div class="app-container home">


    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             style="width: 100%;display: flex;justify-content: center">
      <el-menu-item index="1"
                    style="text-align: center; font-size: 30px;margin-top: 20px;color: #409EFF;font-weight: bold">云搜索
      </el-menu-item>

      <el-menu-item index="3"
                    style="text-align: center; font-size: 30px;margin-top: 20px;color: #409EFF;font-weight: bold">信息检索
      </el-menu-item>

    </el-menu>

    <div v-if="activeIndex=='3'">

      <retrieval></retrieval>


    </div>



    <div v-if="activeIndex=='1'">

      <div style="text-align: center;margin-top: 20px">
        <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select" style="width: 800px">

          <el-button slot="append" icon="el-icon-search" @click="search"/>
        </el-input>
      </div>

      <div style="margin-top: 20px;text-align: center">

        <el-radio-group v-model="url">

          <el-radio :label="item.url" border v-for="item in urls" checked  :key="item.name">{{item.name}}</el-radio>

        </el-radio-group>


      </div>

      <el-divider></el-divider>

      <div style="height: 800px" v-if="showIframe">
        <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto"/>
      </div>
    </div>


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="分类名称" prop="dictLabel">
          <el-input v-model="form.dictLabel" placeholder="请输入分类名称"/>
        </el-form-item>
        <el-form-item label="显示排序" prop="dictSort">
          <el-input-number v-model="form.dictSort" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {addData, updateData} from "@/api/system/dict/data";
  import Website from '@/components/Custom/Website'

  import retrieval from '@/views/search/retrieval'

  export default {
    name: "Search",
    components: {Website,retrieval},
    data() {
      return {
        activeIndex: '1',
        urls: [{
          name: "360搜索",
          url: 'https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezt&q=',
          checked: true

        }, {
          name: "搜狗搜索",
          url: 'https://www.sogou.com/web?query=',
          checked: false
        }, {
          name: "必应搜索",
          url: 'https://cn.bing.com/search?q=',
          checked: false
        }, {
          name: "微博搜索",
          url: 'https://s.weibo.com/weibo?q=',
          checked: false
        }, {
          name: "头条搜索",
          url: 'https://so.toutiao.com/search?dvpf=pc&source=input&keyword=',
          checked: false
        }, {
          name: "百度搜索",
          url: 'https://www.baidu.com/s?wd=',
          checked: false
        }],
        searchText: '',
        src: '',
        url: 'https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezt&q=',
        showIframe: false,
        obj:undefined,
        webs: [],
        total: 0,
        mediaTypeOptions: [],
        statusOptions: [],
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          dictLabel: [
            {required: true, message: "分类名称不能为空", trigger: "blur"}
          ]
        },


      };
    },
    created() {
      this.getUrlType();
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });

    },
    methods: {

      getUrlType() {
        this.getDicts("url_type").then(response => {
          this.mediaTypeOptions = response.data;
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.dictCode != undefined) {
              updateData(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getUrlType();
              });
            } else {
              addData(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getUrlType();
              });
            }
          }
        });
      },
      createType() {
        this.reset();
        this.open = true;
        this.title = "添加分类";
      },
      // 表单重置
      reset() {
        this.form = {
          dictType: 'url_type',
          dictLabel: undefined,
          dictValue: 0,
          dictSort: 0
        };
        this.resetForm("form");
      },



      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.activeIndex = key
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      search() {
        if (this.url === "https://www.baidu.com/s?wd=") {
          this.src = this.url + this.searchText
          window.open(this.src, '_blank');
          this.showIframe = false
        } else {
          this.showIframe = true
          this.src = this.url + this.searchText
          console.log(this.src)
        }

      },

    }
  };
</script>


<style scoped lang="scss">

  .home {
    background-color: white;
  }
</style>


